<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>个人中心</title>
    <link rel="stylesheet" href="/addons/jquery-weui-build/css/weui.min.css">
    <link rel="stylesheet" href="/addons/jquery-weui-build/css/jquery-weui.css">
    <link rel="stylesheet" href="/css/system/main.css?v=2018050801">
</head>
<body ontouchstart>
<div class="index-review">
    <div class="header-bk">
        <div class="con-head">
            <div class="modify-icon">
                <img @if(empty($user->logo)) src="../../images/system/ps1.png" @else src="{{url($user->logo)}}" @endif>
                <p class="btn-p">修改头像</p>
            </div>
            <span class="user-name">{{$user->name}}</span>
            <a class="out-login" href="{{url('/logout')}}">退出登录</a>
        </div>
    </div>
    <div class="in-con">
        <input type="hidden" name="_token" value="{{csrf_token()}}">
        <input type="hidden" name="uid" value="{{$user->id}}">
        <div class="weui-cells">
            <a class="weui-cell weui-cell_access change-word" href="javascript:;">
                <div class="weui-cell__hd"><img src="../../images/system/change.png"></div>
                <div class="weui-cell__bd">
                    <p>修改密码</p>
                </div>
                <div class="weui-cell__ft">
                </div>
            </a>
            @if($user->role_id > 0)
            <a class="weui-cell weui-cell_access change-qu" href="{{url('/admin/group')}}">
                <div class="weui-cell__hd"><img src="../../images/system/que.png"></div>
                <div class="weui-cell__bd">
                    <p>返回</p>
                </div>
                <div class="weui-cell__ft">
                </div>
            </a>
            @endif
        </div>
    </div>
</div>
<div class="show-hidden">
    <ul>
        <li><a href="{{url('/user/performance/detail')}}"><img src="../../images/system/user.png">我的考评</a></li>
        <li><a href="{{url('/user/performance/index')}}"><img src="../../images/system/all.png">全员考评</a></li>
        <li><a href="{{url('/user/performance/month')}}"><img src="../../images/system/message.png">月度意见</a></li>
    </ul>
</div>
@if($user->role_id == 0)
<div class="reful-tabbar">
    <a href="javascript:void(0)" class="find-link tabbar-item ">
        <div class="img-div">
        </div>
        <p class="tabbar-label">考评</p>
    </a>
    <a href="{{url('/user/message')}}" class="message-center tabbar-item">
        <div class="img-div">
        </div>
        <p class="tabbar-label">消息中心</p>
    </a>
    <a href="{{url('/user/reward')}}" class="reward-punishment tabbar-item">
        <div class="img-div">
        </div>
        <p class="tabbar-label">奖励惩罚</p>
    </a>
    <a href="{{url('/user/setting')}}" class="set-up tabbar-item active">
        <div class="img-div">
        </div>
        <p class="tabbar-label">设置</p>
    </a>
</div>
@endif
<!--图片裁剪-->
<div class="clipbg displaynone">
    <div id="clipArea"></div>
    <div class="loading displaynone">正在载入图片...</div>
    <div class="footer">
        <dl>
            <dd style="background: #fe1041; color: #ffffff;border: none;">打开相册<input type="file" id="file" accept="image/*" ></dd>
            <dd id="clipBtn">完成裁剪</dd>
        </dl>
        <div class="back">取消</div>
    </div>
</div>

<script src="/js/jquery-2.1.4.min.js"></script>
<script src="/addons/jquery-weui-build/js/fastclick.js"></script>
<script src="/addons/phtotclip/hammer.min.js"></script>
<script src="/addons/phtotclip/iscroll-zoom-min.js"></script>
<script src="/addons/phtotclip/lrz.all.bundle.js?v=1"></script>
<script src="/addons/phtotclip/photoClip.js?v=1"></script>
<script>
    $(function() {
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
        FastClick.attach(document.body);
    });
</script>
<script src="/addons/jquery-weui-build/js/jquery-weui.min.js"></script>
<script>
    $(document).ready(function () {
        $('.find-link').click(function () {
            $('.show-hidden').toggle();
        });
        $('.change-word').click(function () {
            alertTwoInput('旧密码','新密码','修改密码','旧密码','新密码','取消','确定')
        });
        $('.change-que').click(function () {
            alertTwoInput('问题','答案','密保验证','请输入你的问题','请输入你的答案','取消','确定')
        })
        $(".btn-p").click(function(){
            $(".clipbg").fadeIn()
        })
        var clipArea = new  PhotoClip("#clipArea", {
            size: [300, 300],//裁剪框大小
            outputSize:[0,0],//打开图片大小，[0,0]表示原图大小
            file: "#file",
            ok: "#clipBtn",
            loadStart: function() { //图片开始加载的回调函数。this 指向当前 PhotoClip 的实例对象，并将正在加载的 file 对象作为参数传入。（如果是使用非 file 的方式加载图片，则该参数为图片的 url）
                $(".loading").removeClass("displaynone");

            },
            loadComplete: function() {//图片加载完成的回调函数。this 指向当前 PhotoClip 的实例对象，并将图片的 <img> 对象作为参数传入。
                $(".loading").addClass("displaynone");

            },
            done: function(dataURL) { //裁剪完成的回调函数。this 指向当前 PhotoClip 的实例对象，会将裁剪出的图像数据DataURL作为参数传入。
                //console.log(222)
                //console.log(dataURL)
                var toke = $('input[name=_token]').val();
                var uid = $('input[name=uid]').val();
                $.ajax({
                    'url': '/user/setting/img?_token='+toke+'&uid='+uid,
                    'type': 'POST',
                    'data': {'dataURL': dataURL},
                    error: function (request) {
                        console.log("error");
                    },
                    success: function (data) {
                        if (data.status == 'success') {
                            alert('头像修改成功');
                        } else {
                            console.log("error");
                        }
                    },
                });
                $('.modify-icon img').attr("src",dataURL);
                $(".clipbg").fadeOut();
            }
        });
        $(".back").click(function(){
            $(".clipbg").fadeOut();
        })
    });
    function alertTwoInput(text1,text2, title, input1, input2, onCancel, onOK) {
        var config = {
            text1: text1,
            text2:text2,
            title: title,
            input1: input1,
            input2: input2,
            onOK: onOK,
            onCancel: onCancel,
            empty: false  //allow empty
        };
        $.modal({
            text: '<p class="weui-prompt-text">' + (config.text1 || '') + '</p><input type="text" name="old" class="weui-input weui-prompt-input" id="weui-prompt-input" placeholder="' + (config.input1 || '') + '" />'+'<p class="weui-prompt-text">' + (config.text2 || '') + '</p>' + '<input name="new" type="text" class="weui-input weui-prompt-input" id="weui-prompt-input" placeholder="' + (config.input2 || '') + '" />',
            title: title,
            buttons: [{
                text: onCancel,
                className: "primary",
                onClick: function () {
                    console.log("cancel");
                    $.closeModal();
                }
            }
                , {
                    text: onOK,
                    className: "primary",
                    onClick: function () {
                        var old = $('input[name=old]').val();
                        var newp = $('input[name=new]').val();
                        var toke = $('input[name=_token]').val();
                        var uid = $('input[name=uid]').val();
                        //alert(toke);
                        $.ajax({
                            'url': '/user/setting/password',
                            'type': 'POST',
                            'data': 'old=' + old + '&newp='+ newp+'&_token='+toke+'&uid='+uid,
                            error: function (request) {
                                console.log("error");
                            },
                            success: function (data) {
                                if (data.status == 'success') {
                                    console.log("ok");
                                } else {
                                    console.log("error");
                                }
                            },
                        });

                    }
                }
            ]
        });
    }
</script>
</body>
</html>